<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>天气API</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div id="box">
    </div>
<script>

    class getData {
        constructor(id,key,name){
            this.id = id;
            this.key = key;
            this.name = name;
        }
        static push(id,key,name){
            return new Promise(function(resolve,reject){
                
                            $.ajax({
        type: 'GET',
        url: 'http://zhouxunwang.cn/data/',
        data: {
            id,
            key,
            name
        },
        dataType: 'JSON',
        error: function (error) {
            reject(error);
        },
        success: function (res) {
            resolve(res);
        }
    });
    
            });

        }
    }
   getData.push(108,"VeHHqtQ0SdT+ipyI9Yw7Tm/APwTgsJeZ/pxz7fU","李白").then(function(res){
       res["result"].forEach(val=>{
            document.getElementById("box").innerHTML += `
            <h1>${val["cname"]}</h1>
            <h3>${val["author"]}</h3>
            <p>${val["content"]}</p>
            `;
       })
   },function(err){})
   
    
    
</script>
</body>
</html>